<template>
  <el-container class="container">
    <el-main class="floor">
      <div style="background:#fff">
        <el-row :gutter="15">
          <el-col :span='24'>
            <el-card class="box-card">
              <div slot="header"
                   class="clearfix">
                <div class="dzy-custom-search-box chart--search-box">
                  <div class="indexTit">年度案件和金额：</div>
                  <div>
                    选择年份：
                    <el-date-picker v-model="selectForm.year"
                                    align="right"
                                    type="year"
                                    size="small"
                                    value-format="yyyy"
                                    placeholder="选择年">
                    </el-date-picker>
                    &nbsp;
                  </div>
                  <div>
                    <el-button @click="searchHandleClick(0)"
                               size="small"
                               type="primary"
                               icon="el-icon-search">查询</el-button>
                  </div>
                  <div>
                    <el-button type="info"
                               size="small"
                               plain>案件总数：{{total.count}}</el-button>
                    <el-button type="info"
                               size="small"
                               plain>实收金额：{{total.amount}}</el-button>
                  </div>
                </div>
              </div>
              <div>
                <el-row>
                  <el-col :span='12'>
                    <div class="chart-main"
                         id="peopleEchart"></div>
                  </el-col>
                  <el-col :span='12'>
                    <div class="chart-main"
                         id="moneyEchart"></div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="padBot20"></div>
        <el-row :gutter="15">
          <el-col :span='24'>
            <el-card class="box-card">
              <div slot="header"
                   class="clearfix">
                <div class="dzy-custom-search-box chart--search-box">
                  <div class="indexTit">年度律师业绩：</div>
                  <div>
                    选择年份：
                    <el-date-picker v-model="selectForm.year"
                                    align="right"
                                    type="year"
                                    size="small"
                                    value-format="yyyy"
                                    placeholder="选择年">
                    </el-date-picker>
                    &nbsp;
                  </div>
                  <div>
                    选择部门：
                    <el-select filterable
                               clearable
                               v-model="selectForm.deptId"
                               placeholder="部门名称"
                               size="small">
                      <el-option v-for="item in deptOption"
                                 :key="item.id"
                                 :value="item.id"
                                 :label="item.name"></el-option>
                    </el-select>
                    &nbsp;
                  </div>
                  <div>
                    <el-button @click="searchHandleClick(1)"
                               size="small"
                               type="primary"
                               icon="el-icon-search">查询</el-button>
                  </div>
                  <div>
                    <el-button type="info"
                               size="small"
                               plain>年度总业绩：{{total.personAmount}}</el-button>
                  </div>
                </div>
              </div>
              <div>
                <el-row>
                  <el-col :span='24'>
                    <div class="chart-main"
                         id="userEchart"></div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>
<script>
// import {getCaseYearData, getMoneyYearData, getUserYearData} from '@/http/AppData'
// import { findDeptList } from '@/http/AppApi'
export default {
  data () {
    return {
      value: new Date(),
      formData: {},
      selectForm: {},
      total: {},
      deptOption: []
    }
  },
  mounted () {
    // this.findDeptList()
    // this.reqMoneyApi()
    // this.reqCaseApi()
    // this.reqUsersApi()
  },
  updated () { },
  methods: {
    findDeptList (id) {
      // let param = { 'unitId': id }
      // findDeptList(param).then(resp => {
      //   if (resp.code && resp.code === '200') {
      //     let data = resp.data
      //     this.deptOption = data
      //   }
      // })
    },
    reqCaseApi () {
      // let param = {
      //   lengend: [],
      //   xAxisData: [],
      //   seriesData: {}
      // }
      // getCaseYearData(this.selectForm).then(resp => {
      //   if (resp.code && resp.code === '200') {
      //     let intNum = 0
      //     let data = resp.data
      //     for (const key in data) {
      //       if (data.hasOwnProperty(key)) {
      //         const element = data[key]
      //         param.xAxisData.push(key + '月')
      //         for (const k in element) {
      //           if (element.hasOwnProperty(k)) {
      //             const ele = element[k]
      //             if (!param.seriesData[k]) {
      //               param.seriesData[k] = []
      //               param.lengend.push(k)
      //             }
      //             param.seriesData[k].push(ele)
      //             intNum += ele
      //           }
      //         }
      //       }
      //     }
      //     this.$set(this.total, 'count', parseInt(intNum))
      //     this.loadCaseEchart(param)
      //   }
      // })
    },
    loadCaseEchart (param) {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('peopleEchart'))
      contradictionEchart.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: { top: '15%', left: '1%', right: '5%', bottom: '5%', containLabel: true },
        calculable: true,
        xAxis: [{ type: 'category', axisLabel: { color: 'black' }, axisLine: { lineStyle: m.textStyle }, data: param.xAxisData }],
        yAxis: [{
          type: 'value',
          name: '数量',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: { color: 'black' },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          }
        }],
        series: [
          {
            name: '刑事案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['刑事案件']
          },
          {
            name: '民事案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['民事案件']
          },
          {
            name: '仲裁案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['仲裁案件']
          },
          {
            name: '咨询案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['咨询案件']
          },
          {
            name: '行政案件',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['行政案件']
          }
        ]
      }, true)
    },
    reqMoneyApi () {
      // let param = {
      //   lengend: [],
      //   xAxisData: [],
      //   seriesData: {}
      // }
      // getMoneyYearData(this.selectForm).then(resp => {
      //   if (resp.code && resp.code === '200') {
      //     let data = resp.data
      //     let intNum = 0
      //     for (const key in data) {
      //       if (data.hasOwnProperty(key)) {
      //         const element = data[key]
      //         param.lengend.push(key)
      //         for (const k in element) {
      //           if (element.hasOwnProperty(k)) {
      //             const ele = element[k]
      //             if (!param.seriesData[key]) {
      //               param.seriesData[key] = []
      //             }
      //             if (param.xAxisData.indexOf(k + '月') === -1) param.xAxisData.push(k + '月')
      //             param.seriesData[key].push(ele)
      //             if (key === '实收金额') intNum += parseFloat(ele)
      //           }
      //         }
      //       }
      //     }
      //     this.$set(this.total, 'amount', intNum)
      //     this.loadMoneyEchart(param)
      //   }
      // })
    },
    loadMoneyEchart (param) {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('moneyEchart'))
      contradictionEchart.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: { top: '15%', left: '1%', right: '5%', bottom: '5%', containLabel: true },
        calculable: true,
        xAxis: [{ type: 'category', axisLabel: { color: 'black' }, axisLine: { lineStyle: m.textStyle }, data: param.xAxisData }],
        yAxis: [{
          type: 'value',
          name: '金额',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: { color: 'black' },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          }
        }],
        series: [

          {
            name: '实收金额',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['实收金额']
          },
          {
            name: '应收金额',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            data: param.seriesData['应收金额']
          }
        ]
      }, true)
    },
    reqUsersApi () {
      // let param = {
      //   lengend: [],
      //   xAxisData: [],
      //   seriesData: {}
      // }
      // let seriesData = []
      // getUserYearData(this.selectForm).then(resp => {
      //   if (resp.code && resp.code === '200') {
      //     let data = resp.data
      //     let intNum = 0
      //     for (const key in data) {
      //       if (data.hasOwnProperty(key)) {
      //         const element = data[key]
      //         param.xAxisData.push(key + '月')
      //         for (const k in element) {
      //           if (element.hasOwnProperty(k)) {
      //             const ele = element[k]
      //             if (!param.seriesData[k]) {
      //               param.seriesData[k] = []
      //             }
      //             param.seriesData[k].push(ele)
      //             intNum += parseFloat(ele)
      //           }
      //         }
      //       }
      //     }
      //     // console.log(param.seriesData)
      //     this.$set(this.total, 'personAmount', intNum)
      //     for (const j in param.seriesData) {
      //       if (param.seriesData.hasOwnProperty(j)) {
      //         const element = param.seriesData[j]
      //         param.lengend.push(j)
      //         let obj = {
      //           name: j,
      //           type: 'bar',
      //           data: element
      //         }
      //         seriesData.push(obj)
      //       }
      //     }
      //     this.loadusersEchart(param, seriesData)
      //   }
      // })
    },
    loadusersEchart (param, seriesData) {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('userEchart'))
      contradictionEchart.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: {
          data: param.lengend,
          y: '10px'
        },
        grid: { top: '35%', left: '1%', right: '5%', bottom: '5%', containLabel: true },
        calculable: true,
        xAxis: [{ type: 'category', axisLabel: { color: 'black' }, axisLine: { lineStyle: m.textStyle }, data: param.xAxisData }],
        yAxis: [{
          type: 'value',
          name: '金额',
          axisLine: {
            lineStyle:
            {
              color: '#446fbd'
            }
          },
          axisLabel: { color: 'black' },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#546a99'
            }
          }
        }],
        series: seriesData
      }, true)
    },
    searchHandleClick (type) {
      if (type === 0) {
        this.reqCaseApi()
        this.reqMoneyApi()
      } else if (type === 1) {
        this.reqUsersApi()
      }
    }
  }
}
</script>
<style scoped>
.box-card {
  width: 100%;
}
.floor {
  padding: 15px;
}
.chart-main {
  height: 270px;
}
.dzy-custom-search-box > div {
  margin-bottom: 0;
}
.indexTit {
  font-size: 22px;
}
</style>
